<template>
    <div class="m-mt-main">
        <el-row>
            <el-col :span="5">
                <emenu></emenu>
            </el-col>
            <el-col :span="19">
                <life></life>
                <login></login>    
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <quality title="有格调" :store="quality" @sendData="setQuality"></quality>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <maoyan title="猫眼电影" :movie="maoyan" @sendData="setMaoyan"></maoyan>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <recommond title="猜你喜欢" :like="recommond"></recommond>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <navbar></navbar>   
            </el-col>
        </el-row>           
    </div>
</template>

<script>
import emenu from '@/components/index/emenu.vue'
import life from '@/components/index/life.vue'
import login from '@/components/index/login.vue'
import quality from '@/components/index/quality.vue'
import maoyan from '@/components/index/maoyan.vue'
import recommond from '@/components/index/recommond.vue'
import navbar from '@/components/index/navbar.vue'

export default{
    data(){
        return{
            quality: {},    //有格调
            maoyan: [],     //猫眼电影
            recommond: []   //猜你喜欢
        }
    },
    async asyncData(ctx){
        let {status,data:{code,store}} = await ctx.$axios.get('http://127.0.0.1:8082/scenes/quality' , {
            params:{
                theme: 'quality',
                tab: 'all',
                limit: 12,
                ci: 99
            }
        });
        let {status2,data:{code2,movie}} = await ctx.$axios.get('http://127.0.0.1:8082/scenes/maoyan' , {
            params:{
                limit: 5,
                ci: 99
            }
        });
        let {status3,data:{code3,like}} = await ctx.$axios.get('http://127.0.0.1:8082/scenes/recommond');
        return{
            quality:{
                tabs: store.tabs,
                data: store.data
            },
            maoyan: movie.hot,
            recommond: like    
        }
    },
    methods:{
        setQuality(data){
            this.quality = {
                tabs: data.tabs,
                data: data.data
            }
        },
        setMaoyan(data){
            this.maoyan = data;
        }
    },
    components:{
        emenu,
        life,
        login,
        quality,
        maoyan,
        recommond,
        navbar    
    }     
}
</script>

<style lang="less">
    @import "../assets/less/index/index.less";
</style>